<template>
	<view>
		<u-swiper :list="list1" @change="change" height="100vw" @click="click" :autoplay="false"
			indicatorStyle="right: 20px">
			<view slot="indicator" class="indicator-num">
				<text class="indicator-num__text">{{ current + 1 }}/{{ list1.length }}</text>
			</view>
		</u-swiper>
		
		<view class="item">
			<view class="item_title">
				罗马仕移动储能电源
			</view>
			
		<view class="item_desc">
			青岛双流科技有限公司
		</view>
			
			<view class="row-h-center" style="margin-top: 41rpx;">
				<view class="col-center">
					<view class="item_price1">
						200.00
					</view>
					<view class="item_price">
						市场价 (￥)
					</view>
				</view>
				<view class="col-center" style="margin-left: 40rpx;">
					<view class="item_price2">
						200.00
					</view>
					<view class="item_price">
						市场价 (￥)
					</view>
				</view>
			</view>
		
			<view class="row-between-center" style="margin-top: 41rpx;">
				<view class="item_btn1 row-center">
					分享
				</view>
				<view class="item_btn1 row-center">
					收藏
				</view>
				<view class="item_btn2 row-center">
					查看完整信息
				</view>
			</view>
		</view>
		
		<view class="item">
			<view class="item_subtitle">
				详情
			</view>
			<view class="item_img">
				
			</view>
		</view>
		
		<view class="item">
			<view class="item_subtitle">
				合作政策
			</view>
			<view class="item_policy">
				一台代发货，30%
			</view>
		</view>
		
		<view class="item">
			<view class="item_subtitle">
				合作政策
			</view>
			<view class="item_policy2" >
				推荐的渠道季度销售过100台，额外奖励1000元
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				current: 0
			}
		},
		methods: {

		}
	}
</script>
<style>
	page{
		background-color: #F6F7F9;
	}
</style>
<style lang="scss" scoped>
	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}
	
	.item{
		padding: 32rpx;
		margin-top: 20rpx 32rpx 0 32r[x];
		background: #FFFFFF;
		border-radius: 25rpx ;
		&_title{
			font-weight: 500;
			font-size: 38rpx;
			color: #17161B;
			line-height: 54rpx;
		}
		&_desc{
			font-weight: 500;
			font-size: 25rpx;
			color: #747376;
			line-height: 54rpx;
		}
		&_price1{
			font-weight: bold;
			font-size: 38rpx;
			color: #02AD69;
			line-height: 54rpx;
		}
		&_price2{
			font-weight: bold;
			font-size: 38rpx;
			color: #DF282C;
			line-height: 54rpx;
		}
		&_price{
			font-weight: 400;
			font-size: 25rpx;
			color: #17161B;
			line-height: 42rpx;
		}
		&_btn1{
			width: 125rpx;
			height: 83rpx;
			background: #FFFFFF;
			border-radius: 10rpx ;
			border: 2rpx solid #0D59D1;
			font-weight: 500;
			font-size: 29rpx;
			color: #0D59D1;
			line-height: 46rpx;
		}
		&_btn2{
		width: 313rpx;
		height: 83rpx;
		background: #0D59D1;
		border-radius: 10rpx;
		font-weight: 500;
		font-size: 29rpx;
		color: #FFFFFF;
		line-height: 46rpx;
		}
		&_subtitle{
			font-weight: 500;
			font-size: 29rpx;
			color: #17161B;
			line-height: 46rpx;
		}
		&_img{
			width: 100%;
			height: 625rpx;
			background-color: red;
		}
		&_policy{
			margin-top: 20rpx;
			width: 100%;
			background: linear-gradient( 90deg, #E9F6FE 0%, #F3FBFE 100%);
			padding: 21rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 25rpx;
			color: #17161B;
			line-height: 42rpx;
		}
		&_policy2{
			margin-top: 20rpx;
			width: 100%;
			background: linear-gradient( 90deg, #FBF2ED 0%, #FCFBF9 100%);
			padding: 21rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 25rpx;
			color: #17161B;
			line-height: 42rpx;
		}
		
	}
	
</style>